@import '../var';

#notify-container {
  position: absolute;
  top: 1em;
  right: 0;
  z-index: 22500;
  .notify {
    background-color: $background;
    margin-right: 1em;
    border-radius: 0.375em;
    position: relative;
    padding: 1em 1.25em;
    box-shadow: 0 0 5px $box-shadow;
    // transition: all 1s;
    transition: 0.15s;

    &:not(:first-child) {
      margin-top: 1em;
    }

    .notify-icon {
      position: absolute;
      top: 0.8em;
      left: 1em;
      i {
        font-size: 1.4rem;
      }
    }

    .notify-header {
      font-weight: 600;
      margin-bottom: 0.5em;
    }

    .notify-main {
      min-width: 20em;
      max-width: 30em;
    }

    > .delete {
      right: 0.5rem;
      position: absolute;
      top: 0.5rem;
    }

    .notify-footer {
      margin-top: 1.25em;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    &.notify-with-icon {
      .notify-main {
        margin-left: 1.8em;
      }
    }
  }
}

// #notification-container {
//   position: absolute;
//   top: 0;
//   right: 0;
//   z-index: 21500;
//   margin: 20px;
//   font-weight: 500;

//   .notification {
//     width: 250px;
//     box-shadow: 0 0 5px $dark;
//     padding: 0.75em 2.3em;
//     min-height: 4em;
//     > i {
//       position: absolute;
//       top: 0.5rem;
//       left: 0.5rem;
//       font-size: 1.4rem;
//     }

//     // @each $name, $pair in $colors {
//     //   $color: nth($pair, 1);
//     //   &.is-#{$name} {
//     //     background-color:$background;
//     //     color: $text;
//     //     i {
//     //       font-size: 1.5rem;
//     //       color: darken($color, 15%);
//     //     }
//     //   }
//     // }
//   }
// }
